<template>
  <div class="drawStation">
    <div class="input">
      <div>
        <span>关键字搜索：</span>
        <el-input id="tipinput" v-model="tipinput" size="mini"></el-input>
      </div>
      <div>
        <span>经度：</span>
        <el-input v-model="location.lng" size="mini"></el-input>
        <span>纬度：</span>
        <el-input v-model="location.lat" size="mini"></el-input>
        <el-button type="primary" @click="handleDrawStation" size="mini"
          >确定</el-button
        >
      </div>
    </div>
    <div id="draw-station-container"></div>
  </div>
</template>

<script>
import { JS_API_KEY } from "@/settings/amap.config";
import AMapLoader from "@amap/amap-jsapi-loader";
import { isEmpty } from "@/utils/utils";

export default {
  name: "DrawStation",
  props: {
    city: {
      //搜索中心，默认全国，可选择为城市
      type: String,
      default: "",
    },
    lat: {
      default: "",
    },
    lng: {
      default: "",
    },
  },
  data() {
    return {
      marker: null, //标记
      // 地图对象
      AMap: null,
      // 地图实例对象
      map: null,
      // 经纬度
      location: {
        lat: "",
        lng: "",
      },
      // 搜索输入
      tipinput: "",
      auto: null,
      placeSearch: null,
    };
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods: {
    /**
     * 创建地图
     */
    initMap() {
      console.log("地图初始化");
      // 加载高德地图JSAPI
      AMapLoader.load({
        key: JS_API_KEY, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.PlaceSearch", "AMap.AutoComplete"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.AMap = AMap;
          this.map = new AMap.Map("draw-station-container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 15, //初始化地图级别
            resizeEnable: true,
            //center: [117.237485, 31.702453], //初始化地图中心点位置
            // mapStyle: 'amap://styles/macaron', //设置地图的显示样式
          });

          // 地图控件
          this.map.addControl(new AMap.Scale());
          // 搜索框自动完成类
          this.auto = new AMap.AutoComplete({
            input: "tipinput",
            city: this.city,
          });
          //构造地点查询类
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map,
          });
          // 关键字搜索
          this.placeSearch.search(this.city)

          // 当选中某条搜索记录时触发
          this.auto.on("select", this.select);
          // poi覆盖物点击事件
          this.placeSearch.on("markerClick", this.clickMarkerHandler);
          // 地图点击事件
          this.map.on("click", this.clickMapHandler);

          // 如果需要在地图加载完成后设置经纬度，可以使用以下代码
          this.map.on('complete', ()=> {
            if (this.lat && this.lng){
              this.map.setCenter([this.lng, this.lat]);
            }

          });
        })
        .catch((e) => {
          console.log(e);
        });
    },

    // 当选中某条记录时会触发
    select(e) {
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(e.poi.name); //关键字查询查询
    },

    // 点击地图事件
    clickMapHandler(e) {
      if (this.marker) {
        this.map.remove(this.marker);
      }
      this.location.lng = e.lnglat.getLng();
      this.location.lat = e.lnglat.getLat();
      // 添加标记
      this.marker = new AMap.Marker({
        position: [this.location.lng, this.location.lat], // 坐标
        label: {
          content: "",
          position: "right",
          offset: [10, 0],
        },
      });
      this.map.add(this.marker);
    },
    // 点击poi覆盖物事件
    clickMarkerHandler(e) {
      this.location.lng = e.data.location.lng;
      this.location.lat = e.data.location.lat;
    },
    // 确定拾取坐标点
    handleDrawStation() {
      if (isEmpty(this.location.lng) || isEmpty(this.location.lat)) {
        return this.$message.error("请先拾取坐标点");
      }
      this.$emit("selectLocation", this.location);
    },
  },
  beforeDestroy() {
    console.log("销毁");
    // 销毁地图
    this.map.destroy();
  },
};
</script>

<style lang="scss" scoped>
.drawStation {
  #draw-station-container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: calc(100vh - 334px);
  }

  .input {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    z-index: 999;
    .el-input {
      width: 220px;
      margin-right: 20px;
    }
  }
}
</style>
